<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <title>KISSY - 全终端适配的 JS 类库</title>
  <meta name="viewport" content="width=device-width">
  <link href="http://fonts.googleapis.com/css?family=Droid+Sans|Lekton|Ubuntu+Mono:400,700" rel="stylesheet">
	<link rel="stylesheet" href="templates/assets/bootstrap.css">
	<link href="templates/assets/normalize.css" rel="stylesheet">
	<link href="templates/assets/kissy.css" rel="stylesheet">
	<link href="templates/assets/prettify.css" rel="stylesheet">
	<link href="templates/assets/forkit.css" rel="stylesheet">
	<script src="templates/assets/jquery.min.js"></script>
	<script src="templates/assets/script.js" type="text/javascript"></script>
	<script src="http://g.tbcdn.cn/trip/kissy/1.4.0/seed-min.js"></script>
	<script src="api/assets/highlight.pack.js"></script>
	<link href="api/assets/tomorrow-night-bright.css" rel=stylesheet />
	<link rel="shortcut icon" href="http://a.tbcdn.cn/s/kissy/favicon.ico">
</head>

<body class="">
    <nav id="sidebar">
    <header>
		<a href="index.html">
			<!--img src="http://gtms04.alicdn.com/tps/i4/T1ceiPFbpcXXcljp_h-200-89.png"-->
			<!--img src="templates/assets/img/logo_6.png"-->
			<!--img src="http://gtms04.alicdn.com/tps/i4/T14oa2FcNcXXaOySEh-180-104.png" alt="" /-->
			<!--img src="http://gtms01.alicdn.com/tps/i1/T1Amq1FaXgXXbXVSUh-180-127.png" alt="" /-->
			<img src="http://gtms02.alicdn.com/tps/i2/T1N0jTXXXjXXay7Rri-175-78.png" alt="" />
		</a>
	</header>
    <ul>
      <li class="nav-divider"><a href="index.html"><img src="templates/assets/img/icon-home.png">首页</a></li>
      <li class="nav-divider"><a href="why-kissy.html"><img src="templates/assets/img/icon-why.png">Why KISSY?</a></li>
      <li><a href="get-started.html"><img src="templates/assets/img/icon-getting-started.png">KISSY 1.4.x 教程大纲</a></li>
      <li class="nav-sub"><a href="module-map.html">核心模块列表</a></li>
      <li class="nav-sub"><a href="kmd.html">KISSY 模块规范 (KMD)</a></li>
      <li class="nav-sub"><a href="gbs.html">浏览器兼容基准(GBS)</a></li>
      <li class="nav-sub"><a href="http://cyj.me/jquery-kissy-rosetta/">jQuery KISSY 对比手册</a></li>
      <li class="nav-sub"><a href="http://gallery.kissyui.com/guide">KISSY 组件开发规范</a></li>
      <li class="nav-sub nav-divider"><a href="history.html">历史版本</a></li>
      <li><a href="">API Doc</a></li>
      <li><a href="http://demo.kissyui.com">Demos</a></li>
      <li class="nav-divider"><a href="http://gallery.kissyui.com">KISSY Gallery</a></li>
      <li><a href="tools.html">KISSY 项目构建工具</a></li>
      <li class="nav-sub"><a href="kmc.html">KS Module Compiler</a></li>
      <li class="nav-sub"><a href="http://abc.f2e.taobao.net">ABC</a></li>
      <li class="nav-sub nav-divider"><a href="clam.html">Clam</a></li>
      <li><a href="third-party-lib.html">第三方代码库</a></li>
      <li class="nav-sub"><a href="https://github.com/lorrylockie/tpap/wiki">面向第三方安全的 KISSY</a></li>
      <li class="nav-sub"><a href="http://www.builive.com/demo/index.php">BUI</a></li>
      <li class="nav-sub nav-divider"><a href="http://work.tmall.net/muidoc/build/">MUI</a></li>
      <li><a href="https://github.com/kissyteam/kissy/blob/master/CONTRIBUTING.md">为 KISSY Core 贡献代码</a></li>
      <li class="nav-sub"><a href="http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml">HTML/CSS编码规范</a></li>
      <li class="nav-sub nav-divider"><a href="http://docs.kissyui.com/source/tutorials/style-guide/google/javascriptguide.xml">JavaScript 编码规范</a></li>
	  <li><a href="upgrade.html"><img src="templates/assets/img/icon-documentation.png">1.3.x->1.4.0 升级指南</a></li>
	  <li><a href="faq.html"><img src="templates/assets/img/icon-faqs.png">FAQ</a></li>
      <li><a href="https://github.com/kissyteam/kissy"><img src="templates/assets/img/icon-github.png">GitHub</a></li>
	  <li><a href="core-team.html"><img src="templates/assets/img/icon-google-plus.png">KISSY 核心小组</a></li>
    </ul>
  </nav>

  <div id="content">
    <article>
      

	<h1>Kissy Module Compiler（Grunt-KMC）</h1>
<p>Grunt-kmc 依赖 kmc，<a href="https://github.com/daxingplay/ModuleCompiler/">kmc 使用指南</a>。</p>
<p>环境依赖：Node，Grunt。</p>
<h2>环境准备</h2>
<p>Grunt-kmc 依赖 Grunt <code>~0.4.1</code>。如果你未曾安装grunt，<a href="http://gruntjs.com/getting-started">参照这里安装Grunt</a>，<a href="http://gruntjs.com/sample-gruntfile">学习如何写Gruntfile</a>。熟悉以上内容后，可以这样来安装grunt-kmc插件：</p>
<pre><code>npm install grunt-kmc --save-dev</code></pre>
<p>打开你创建的Gruntfile，并添加代码：</p>
<pre><code>grunt.loadNpmTasks(&#39;grunt-kmc&#39;);</code></pre>
<h2><code>KMC</code>任务配置</h2>
<p>在项目的Gruntfile文件中，在<code>grunt.initConfig()</code>函数参数的JSON对象中，添加一段名为<code>kmc</code>的段落。</p>
<pre><code>grunt.initConfig({
    kmc: {
        options: {
            // 任务配置项，更多配置项请参照这里：
            // https://github.com/daxingplay/ModuleCompiler
        },
        your_target: {
            // 目标任务，定义文件筛选规则
        }
    }
})</code></pre>
<h2>配置项</h2>
<h3>options.packages</h3>
<p>类型：<code>Array</code>，默认值：<code>[]</code>，KISSY 包配置。</p>
<h3>options.charset</h3>
<p>类型：<code>String</code>，默认值：<code>utf-8</code>，</p>
<h3>options.comboOnly</h3>
<p>类型：<code>Boolean</code>，默认值：<code>false</code>，当指定某个文件为入口进行解析时，只生成这个文件的依赖Map，不作静态合并</p>
<h3>options.depFilePath</h3>
<p>类型：<code>String</code>，默认值：<code>&quot;&quot;</code>，依赖关系表存放的文件路径</p>
<h3>options.depFileCharset</h3>
<p>类型：<code>String</code>，默认值：和options.charset 保持一致，依赖关系表存放的文件的编码类型</p>
<h3>options.traverse</h3>
<p>类型：<code>Boolean</code>，默认值：<code>false</code>，当指定模个文件为入口文件时，遍历子目录进行构建</p>
<h3>options.comboMap</h3>
<p>类型：<code>Boolean</code>，默认值：<code>false</code>，当指定一批文件为源文件时，对这些文件只生成模块依赖关系表，存放于<code>options.depFilePath</code>中</p>
<hr>
<h2>示例代码</h2>
<h3>示例1</h3>
<p>入口为单个文件，将这个文件的依赖关系解析好后合并入另一个文件</p>
<pre><code>grunt.initConfig({
    kmc: {
        main:{
            options: {
                packages: [
                    {
                        name: &#39;test&#39;,
                        path: &#39;assets/src&#39;,
                        charset: &#39;gbk&#39;
                    }
                ]
            },
            files: [{
                src: &#39;assets/src/test/index.js&#39;,
                dest: &#39;assets/dist/test/index.combo.js&#39;
            }]
        }
    }
});</code></pre>
<p>详细配置项请参照<a href="https://github.com/daxingplay/ModuleCompiler">kmc首页</a>。</p>
<h3>示例2</h3>
<p>入口为一批文件，每个文件都解析合并</p>
<pre><code>grunt.initConfig({
    kmc: {
        options: {
            packages: [
                {
                    name: &#39;pkg-name&#39;,
                    path: &#39;../&#39;,
                    charset:&#39;utf-8&#39;
                }
            ],
            // 将 ModuleName 中的 `src` 去掉
            map: [[&#39;pkg-name/src/&#39;, &#39;pkg-name/&#39;]]
        },

        main: {
            files: [
                {
                    // 这里指定项目根目录下所有文件为入口文件
                    expand: true,
                    cwd: &#39;src/&#39;,
                    src: [ &#39;**/*.js&#39;, &#39;!Gruntfile.js&#39;],
                    dest: &#39;build/&#39;
                }
            ]
        }
    }
});</code></pre>
<h3>示例3</h3>
<p>入口为一批文件，每个文件都解析合并，包名从配置文件中读取</p>
<pre><code>grunt.initConfig({
    // 读取`abc.json配置文件中的配置`
    pkg: grunt.file.readJSON(&#39;abc.json&#39;),
    kmc: {
        options: {
            packages: [
                {
                    name: &#39;&lt;%= pkg.name %&gt;&#39;,
                    path: &#39;../&#39;,
                    charset:&#39;utf-8&#39;
                }
            ],
            // 将 ModuleName 中的 `src` 去掉
            map: [[&#39;&lt;%= pkg.name %&gt;/src/&#39;, &#39;&lt;%= pkg.name %&gt;/&#39;]]
        },

        main: {
            files: [
                {
                    // 这里指定项目根目录下所有文件为入口文件
                    expand: true,
                    cwd: &#39;src/&#39;,
                    src: [ &#39;**/*.js&#39;, &#39;!Gruntfile.js&#39;],
                    dest: &#39;build/&#39;
                }
            ]
        }
    }
});</code></pre>
<p>其中 abc.json 文件内容如下：</p>
<pre><code>{
    &quot;name&quot;: &quot;my-custom-package-name&quot;,
}</code></pre>
<h3>示例4</h3>
<p>只生成模块依赖关系表，对源文件不做修改</p>
<pre><code>grunt.initConfig({
    options: {
        packages: [
            {
                name: &#39;h5-test&#39;,
                path: &#39;../&#39;,// 可以省略
                charset:&#39;utf-8&#39;
            }
        ],
        // 生成模块依赖关系表
        depFilePath:&#39;build/mods.js&#39;,
        comboMap:true
    },
    main: {
        files: [
            {
                src: &#39;src/**/*.js&#39;,
                dest: &#39;build/&#39;
            }
        ]
    }
});</code></pre>
<p>仅这样做通常是不够的，源文件需要手动补全模块名，比如</p>
<pre><code>KISSY.add(&#39;h5-test/abc/index&#39;,function(S){});</code></pre>
<p>另外此功能还需配合<a href="http://npmjs.org/grunt-contrib-copy">Copy插件</a>一起完成。</p>
<h2>应用</h2>
<p><a href="clam.html">Clam</a>工具和<a href="http://abc.f2e.taobao.net/">ABC</a>依赖kmc。</p>


<div id="disqus_thread"></div>
<script>
    if((window.location.hostname.indexOf("kissyui.com")!=-1 )&& window.localStorage.getItem("kissy-commment")!="0"){
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    var disqus_shortname = 'kissy-docs'; // required: replace example with your forum shortname

    // The following are highly recommended additional parameters. Remove the slashes in front to use.
     //var disqus_identifier = '/anim';
     //var disqus_url = window.location;

    /* * * DON'T EDIT BELOW THIS LINE * * */
    (function() {
        var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
        dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
        (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
    })();
    }
</script>



      
  <style>
	.github-btn {
		border: 0 none;
		overflow: hidden;
		margin-top:4px;
	}
	footer {
		border-top:1px solid #e2e2e2;
		padding-top:20px;
		clear:both;
	}
	/* iPhone 及以下 */
	@media only screen and (max-width: 767px) {
		.github-link {
			display:none;
		}
	}
  </style>
  <footer>




	<div class="text-center">
		©2013 - 2033 KISSY UI LIBRARY
		<br /> <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=kissyteam&amp;repo=kissy&amp;type=watch&amp;count=true" width="100" height="20" title="Star on GitHub"></iframe> 
	<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=kissyteam&amp;repo=kissy&amp;type=fork&amp;count=true" width="102" height="20" title="Fork on GitHub"></iframe>
	</div>
  </footer>
    </article>
  </div>
  <a target="_blank" href="https://github.com/kissyteam/kissy" class="github-link"><img alt="Fork me on GitHub" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" style="position: absolute; top: 0; right: 0; border: 0; z-index: 50"></a>
  <script>
	var S = KISSY;
	(function(){
		S.use('node',function(S){
			S.all('code').each(function(node){
				var className = node.attr('class');
				if(/^lang-/.test(className)){
					var tc = className.replace(/^lang-/,'');
					node.replaceClass(className,tc);
				}
			});
			hljs.tabReplace = '    ';
			hljs.initHighlighting();
		});
	})();
	(function(){
		var h3s = document.getElementsByTagName('h3');
		for(var i = 0;i<h3s.length;i++){
			var str = S.trim(h3s[i].innerHTML);
			try{
				str = str.match(/\w+/)[0];
			}catch(e){
				continue;
			}
			h3s[i].innerHTML = '<a name="'+str+'"></a>' + h3s[i].innerHTML;
		}
	})();
  </script>
</body>
</html>
